{% extends "../base_adminlte.html" %}

{% block content %}
<div class="content-wrapper">
  <!-- Content Header (Page header) -->
    <div class="content-header">
    </div>

  <section class="content">
   {% if perms.public.user_manage %}
     <button  type="button" class="btn btn-primary" id="btn_add" data-toggle="modal"
                     data-target="#addModal" onclick="location='{% url 'useradd' %}'">新增用户</button>
  {% endif %}
      <table class="table table-bordered" style="text-align: center" >
          <tr style="font-weight: bold;background-color: #3c8dbc80;">
            <td align="center" style="white-space:nowrap;">序号</td>
            <td align="center" style="white-space:nowrap;">用户</td>
            <td align="center" style="white-space:nowrap;">状态</td>
            <td align="center" style="white-space:nowrap;">组</td>
            <td align="center" style="white-space:nowrap;">操作</td>

          </tr>
          {% for h in page %}
              <tr style="background-color: #e4e6e8">
                  <td style="white-space:nowrap;vertical-align:middle;">{{ forloop.counter }}</td>
                  <td style="white-space:nowrap;vertical-align:middle;">{{ h.username }}</td>
                  <td style="white-space:nowrap;vertical-align:middle;">{{ h.is_active }}</td>
                  <td style="white-space:nowrap;vertical-align:middle;">
                          {% for g in h.groups.all %}
                          <a href="/ansible/rolelist/1">{{ g.name }}</a>
                          {% endfor %}
                  </td>
              {% if perms.public.user_manage %}
                  <td style="white-space:nowrap;vertical-align:middle;">
                      <button type="button" class="btn btn-warning btn-xs" onclick="location='{% url 'usermod' %}?id={{ h.id }}'">修改</button>
                      <button type="button" class="btn btn-danger btn-xs" onclick="return del({{ h.id }});">删除</button>
                      <button type="button" class="btn btn-dropbox btn-xs" onclick="return reset({{ h.id }});">重置密码</button>
                      </td>
                  {% else %}
                  <td style="white-space:nowrap;vertical-align:middle;">/</td>
               {% endif %}
              </tr>
      {% endfor %}
      </table> 
<div  style="float:right;height: 200px;font-size:15px">
        {#            #总页码#}
            <div  style="width: 90px;height: 50px;float:left;margin: 10px 0 0 1px"> 总页码 <label>{{ total }}&nbsp;&nbsp;</label></div>
        {#            #当前页码#}
            <div  style="width: 90px;height: 50px;float:left;margin: 10px 0 0 1px"> 当前页码 <label>{{ page.number }}&nbsp;&nbsp;</label></div>

{#            #首页#}
               <div  style="width: 30px;height: 50px;float:left;margin: 10px 0 0 1px">
                        <p><a href='/ansible/userlist/1'>首页</a> </p>
               </div>

{#             #前一页#}
                <div style="width: 20px;height: 50px;float:left;margin: 10px 0 0 5px">
                   {% if page.has_previous %}
                        <p><a href="/ansible/userlist/{{ page.previous_page_number }}">{{ page.previous_page_number }}</a> </p>
                    {% endif %}&nbsp;&nbsp;
               </div>
{#             #当前页页码#}
               <div  style="width: 20px;height: 50px;float:left;margin: 10px 0 0 1px">
                <p href="/ansible/userlist/{{ page.number }}">{{ page.number }}</p>
               </div>
{#                 #后一页#}
               <div style="width: 20px;height: 50px;float:left;margin: 10px 0 0 1px">
                       {% if page.has_next %}
                            <p><a href="/ansible/userlist/{{ page.next_page_number }}">{{ page.next_page_number }}</a></p>
                       {% else %}
                       <p></p>
                        {% endif %}
               </div>
{#                 #尾页#}
                 <div  style="width: 50px;height: 50px;float:left;margin: 10px 0 0 1px">
                        <p><a href="/ansible/userlist/{{ total }}">尾页</a> </p>
               </div>
  </div>
  </section>
</div>
{% endblock %}

{% block scriptcontent %}
<script>
    function del(a){
             if(confirm("确实要删除吗?")){
                 alert("已经删除！");
                 document.getElementById('')
                 location='{% url 'userdelete' %}?id='+a+''
            }else{
                alert("已经取消了删除操作");
             }
         }
function reset(a){
             if(confirm("确实要重置吗?")){
                 alert("已经重置密码！");
                 document.getElementById('')
                 location='{% url 'userreset' %}?id='+a+''
            }else{
                alert("已经取消了重置密码操作");
             }
         }
</script>
{% endblock %}
